<template>
  <div style="background-color: white;height: 2500px;padding-left: 10px;padding-top: 5px;margin-top: 10px">
    {{orderId}}
    <div>
    <h1>基本信息</h1>
    <hr>
    <br>
    <br>
    订单编号：<el-input v-model="tOrderbasicinfo.orderId" placeholder="请输入内容" style="width: 400px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    客户名称：<el-input v-model="tOrderbasicinfo.username" placeholder="请输入内容" style="width: 400px" :disabled="true"></el-input>
    <br>
    <br>
    <br>
    <br>
    订单类型：<el-input v-model="tOrderbasicinfo.typeName" placeholder="请输入内容" style="width: 400px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    创建人：&nbsp;&nbsp;&nbsp;&nbsp;<el-input v-model="tOrderbasicinfo.admin" placeholder="请输入内容" style="width: 400px" :disabled="true"></el-input>
    <br>
    <br>
    <br>
    <br>
    创建时间：
    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 400px" v-model="tOrderbasicinfo.receiveTime" type="datetime" :disabled="true"></el-date-picker>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    订单来源：<el-input v-model="tOrderbasicinfo.orderfrom" placeholder="请输入内容" style="width: 400px" :disabled="true"></el-input>
    <br>
    <br>
    <br>
    <br>
    </div>
    <hr>
    <div>
    <br>
    <h1>地址信息</h1>
    <br>
    <br>
    提货单位：<el-input v-model="tAdress.unit" placeholder="请输入内容" style="width: 300px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    提货联系人：<el-input v-model="tAdress.linkman" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    联系人电话：<el-input v-model="tAdress.tel" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    <br>
    <br>
    <br>
    <br>
    提货省份：<el-input v-model="tAdress.province" placeholder="请输入内容" style="width: 300px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    市：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="tAdress.city" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    区：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="tAdress.district" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    <br>
    <br>
    <br>
    <br>
    详细地址：<el-input v-model="tAdress.fullAddress" placeholder="请输入内容" style="width: 400px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    <br>
    <hr>
    <br>
    收货单位：<el-input v-model="fAdress.unit" placeholder="请输入内容" style="width: 300px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    收货联系人：<el-input v-model="fAdress.linkman" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    联系人电话：<el-input v-model="fAdress.tel" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    <br>
    <br>
    <br>
    <br>
    收货省份：<el-input v-model="fAdress.province" placeholder="请输入内容" style="width: 300px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    市：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="fAdress.city" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    区：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input v-model="fAdress.district" placeholder="请输入内容" style="width: 200px" :disabled="true"></el-input>
    <br>
    <br>
    <br>
    <br>
    详细地址：<el-input v-model="fAdress.fullAddress" placeholder="请输入内容" style="width: 400px" :disabled="true"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <hr>
    <div>
      <h1>货物信息</h1>
      <br>
      <br>
      <el-form :inline="true" :model="goods" ref="goods" label-width="80px" class="demo-ruleForm">
        <el-form-item label="货物名称" prop="goodsName" style="width: 300px" >
          <el-input v-model="goods.goodsName" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="数量" prop="number" style="width: 300px">
          <el-input v-model="goods.number" type="number" @input="countweight(),countbulk()" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="单件重量" prop="weight" style="width: 300px" >
          <el-input v-model="goods.weight" placeholder="单位：kg" type="number" @input="countweight()" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="总重量" prop="totalWeight" style="width: 300px">
          <el-input v-model="goods.totalWeight" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="长度" prop="goodsLong" style="width: 300px" >
          <el-input v-model="goods.goodsLong" placeholder="单位：cm" type="number" @input="countbulk()" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="宽" prop="goodsWide" style="width: 300px"  >
          <el-input v-model="goods.goodsWide" placeholder="单位：cm" type="number" @input="countbulk()" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="高" prop="goodsHight" style="width: 300px"  >
          <el-input v-model="goods.goodsHight" @input="countbulk()" placeholder="单位：cm" type="number" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="单件体积" prop="bulk" style="width: 300px" >
          <el-input v-model="goods.bulk" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="总体积" prop="totalBulk" style="width: 300px">
          <el-input v-model="goods.totalBulk" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="包装类型" prop="boxType" style="width: 300px">
          <el-input v-model="goods.boxType" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="运输类型" prop="tranType" style="width: 300px">
          <el-input v-model="goods.tranType" :disabled="true"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="备注">
          <el-input type="textarea" style="width: 1000px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item>
          <br>
          <br>
        </el-form-item>
      </el-form>
    </div>
    <hr>
    <div>
      <h1>费用信息</h1>
      <br>
      <br>
      <el-form :inline="true" :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="运费单价" prop="pricecm" style="width: 300px">
          <el-input v-model="ruleForm.pricecm" type="number"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="运费单价" prop="pricekg" style="width: 300px">
          <el-input v-model="ruleForm.pricekg" type="number"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="提货费" prop="pickCost" style="width: 300px">
          <el-input v-model="ruleForm.pickCost" type="number"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="装卸费" prop="loadCost" style="width: 300px" >
          <el-input v-model="ruleForm.loadCost" placeholder="单位：kg" type="number"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="包装费" prop="boxCost" style="width: 300px">
          <el-input v-model="ruleForm.boxCost" type="number"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="保险费" prop="safeCost" style="width: 300px" >
          <el-input v-model="ruleForm.safeCost" placeholder="单位：cm" type="number"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="运费总计" prop="tranCost" style="width: 300px"  >
          <el-input v-model="ruleForm.tranCost" placeholder="单位：cm" type="number"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="费用总价" prop="totalCost" style="width: 300px"  >
          <el-input v-model="ruleForm.totalCost" placeholder="单位：cm" type="number" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="payWay" style="width: 300px" >
          <el-input v-model="ruleForm.payWay" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="预付款" prop="earlyPay" style="width: 300px">
          <el-input v-model="ruleForm.earlyPay" type="number" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="代收金额" prop="replacePay" style="width: 300px">
          <el-input v-model="ruleForm.replacePay" type="number" :disabled="true"></el-input>
        </el-form-item>

        <br>
        <el-form-item label="银行账户信息" prop="accoutInfo">
          <el-input type="textarea" v-model="ruleForm.accoutInfo" style="width: 1000px" :disabled="true"></el-input>
        </el-form-item>
          <br>
          <br>
      </el-form>
    </div>
    <hr>
    <div>
      <br>
      <h1>物流信息</h1>
      <br>
      <br>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="vehicleId"
          label="派车单号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="transType"
          label="运输类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="route"
          label="路线"
          width="120">
        </el-table-column>
        <el-table-column
          prop="creatiomTime"
          label="创建时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="appointedTime"
          label="指派时间"
          width="300">
        </el-table-column>
        <el-table-column
          prop="cartypeName"
          label="车辆类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="carrierName"
          label="承运商"
          width="120">
        </el-table-column>
        <el-table-column
          prop="carPlate"
          label="车辆"
          width="120">
        </el-table-column>
        <el-table-column
          prop="arrivalDate"
          label="到达日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="nodeCurrent"
          label="当前节点"
          width="120">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "lookorder",
  data() {
    return {
      tableData: [],
      ruleForm: {
        orderId: '',
        pricecm: '',
        pricekg: '',
        pickCost: '',
        loadCost: '',
        boxCost: '',
        safeCost: '',
        tranCost:'',
        totalCost: '',
        payWay: '',
        accoutInfo: '',
        earlyPay: '',
        replacePay: ''
      },
      tOrderbasicinfo: {
        orderId: '',
        username: '',
        typeName: '',
        admin: '',
        receiveTime: '',
        orderfrom: ''
      },
      tAdress: {
        orderId: '',
        unit: '',
        linkman: '',
        tel: '',
        province: '',
        city: '',
        district: '',
        fullAddress: ''
      },
      fAdress: {
        orderId: '',
        unit: '',
        linkman: '',
        tel: '',
        province: '',
        city: '',
        district: '',
        fullAddress: ''
      },
      address: {
        tAddrinfo: {},
        fAddrinfo: {}
      },
      goods: {
        orderId: '',
        goodsName: '',
        number: '',
        weight: '',
        totalWeight: '',
        goodsLong: '',
        goodsWide:'',
        goodsHight: '',
        bulk: '',
        totalBulk: '',
        boxType: '',
        tranType: ''
      },
      orderId:''
    }
  },
  methods: {
    getAId(){
      this.orderId=this.$route.params.id;
    },
      load(){
      let id=this.orderId;
        this.$http({
          method: "GET",
          url: `http://localhost:8090/tOrder/look/${id}`,
        }).then(resp => {
          console.log(resp);
          console.log(resp.data);
          this.tOrderbasicinfo=resp.data.data.basi;
          this.tAdress=resp.data.data.tAddrinfo;
          this.fAdress=resp.data.data.fAddrinfo;
          this.goods=resp.data.data.tGoods;
          this.ruleForm=resp.data.data.tCost;
          this.tableData=[resp.data.data.tLogistics];

        })
      }
    },
  created() {
      this.getAId();
      this.load();
  }
}
</script>

<style scoped>

</style>
